import { useEffect } from 'react';
import * as echarts from 'echarts';
import 'echarts/lib/component/markPoint'
import 'echarts-gl'
import mapData from './chinaMap.json'
const FuJianMap3D = () => {
  // 初始化图表
  useEffect(() => {
    let myChart = echarts.init(document.getElementById('FuJianMap3D'));
    echarts.registerMap('china', mapData as any);
    let option = {
      backgroundColor: '#0d1a3b',
      title: {
        text: '',
      },
      geo3D: {
        type: 'map',
        name: '中国',
        map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
        roam: false, //开启鼠标缩放和平移漫游。默认不开启
        itemStyle: {
          color: "rgb(29,69,113)", // 背景
          shading: "realistic",//注意这个属性为realistic 不然背景图无法出现
          // realisticMaterial: {
          //   detailTexture: require('/imgs/mapBg.png'),
          //   textureTiling: 1,
          // },
          opacity: 1, //透明度
          borderWidth: .2, // 边框宽度
          borderColor: "#fff", // 边框颜色
          fontSize: .1,
        },
        label: {
          show: true,
          color: '#fff',
          fontSize: 10,
          lineHeight: 20,
          formatter: function (params: { name: any; }) {
            return params.name
          },
        },
        emphasis: {
          itemStyle: {
            color: "yellow", // 背景
            textColor: "yellow", // 背景
          },
          label: {
            show: true,
            color: '#000',
            fontSize: 14,
            lineHeight: 24,
          },
        },
        viewControl: {
          distance: 120,
          alpha: 60, // 上下旋转的角度
          beta: 0, // 左右旋转的角度
        },
      },
      grid3D: {
        show: false,//网格是否显示
        splitArea: { show: true, areaStyle: { color: ['cyan', 'skyblue'] } }
      },
      xAxis3D: {
        type: 'category', // X 轴的类型，可以根据需要设置show:false,//是否显示 x 轴。\
        name: 'x轴',//坐标轴名称
        grid3DIndex: 0,//坐标轴使用的 grid3D 组件的索引
        nameTextStyle: {//‘x轴’样式设置
          color: 'red'
        },
        nameGap: 20,//坐标轴名称与轴线之间的距离，注意是三维空间的距离而非屏幕像素值。
        // min:-3,
        // min:0,//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。适用于值在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）
        // max:100,
        //scale:'',//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
        //如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。
        // minInterval:''//自动计算的坐标轴最小间隔大小。type为value
        // interval:''//类目中无效
        axisLine: {
          show: true,
          lineStyle: {
            color: 'red'
          },
        },
        data: [10, 20, 30, 40, 50],
        axisLabel: {
          // show: false,
          margin: 15,
          formatter: "{value}"
        },
        axisTick: {},
        axisPointer: {
          // label:'',//标签
          show: true//是否显示坐标轴指示线。
        }
      },
      yAxis3D: {
        type: 'category',
        name: 'y轴',
        grid3DIndex: 0,
        nameTextStyle: {
          color: 'blue'
        },
        nameGap: 20,
        axisLabel: {
          show: true,
          margin: 15,
          interval: 0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
          formatter: 1000//自定义x轴显示数据标签格式
        },
        data: [10, 20, 30, 40, 50],
        axisLine: {
          show: true,
          interval: 2,
          lineStyle: {
            color: 'blue'
          },
        },
        axisTick: {},
        axisPointer: {
          show: true
        }
      },
      zAxis3D: {
        type: 'category',
        name: 'z轴',
        grid3DIndex: 0,
        nameTextStyle: {
          color: 'yellow'
        },
        nameGap: 20,
        data: [10, 20, 30, 40, 50],
        axisLine: {
          show: true,
          interval: 2,
          lineStyle: {
            color: 'yellow'
          },
        },
        axisLabel: {
          show: true,
          margin: 15,
        },
        axisTick: {},
        axisPointer: {
          // label:'',
          show: true
        }
      },
      series: [
        {
          type: 'lines3D',
          name: '线条',
          coordinateSystem: 'geo3D',//这个属性是配合bar的数据的，barData用的是经纬度
          effect: {
            show: true,
            period: 10, //箭头指向速度，值越小速度越快
            trailLength: .01, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arr', //箭头图标
            symbolSize: 500, //图标大小
          },
          lineStyle: {
            width: 1,
            opacity: 1,
            color: 'yellow',
          },
          data: [
            {
              coords: [[116.405285, 39.904989], [113.665412, 34.757975]],
              // 数据值
              value: 10,
              // 数据名
              name: '线条1',
            },
            {
              coords: [[114.298572, 30.584355], [113.665412, 34.757975]],
              // 数据值
              value: 10,
              // 数据名
              name: '线条2',
              // 线条样式
              lineStyle: {}
            },
            {
              coords: [[87.617733,43.792818],[113.665412, 34.757975]],
              // 数据值
              value: 10,
              // 数据名
              name: '线条3',
              // 线条样式
              lineStyle: {}
            }
          ]
        }
      ]
    };
    myChart.setOption(option);
  }, []);
  return <>
    <div id="FuJianMap3D" style={{ width: "100%", height: 'calc(100vh - 44px)', margin: '0 auto', transform: 'scale(1)' }} />
  </>;
};

export default FuJianMap3D;
